<script setup lang="ts">
  import { onMounted, PropType, ref, watch } from 'vue'
  import { EmpDetail } from '../types'
  import empDetailService from '../services/empDetail'
  import HButton from '@/components/common/button/HButton.vue'
  import HModal from '@/components/common/Modal/HModal.vue'

  const props = defineProps({
    info: {
      type: Object as PropType<EmpDetail>,
      required: true,
    },
    modelValue: {
      type: Boolean,
      default: () => false,
    },
  })

  const emits = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
  }>()

  const { empInfo, getEmpInfoLoading, getEmpInfoFn } = empDetailService

  // 激活的标签名
  const activeName = ref('info')

  // 弹窗状态
  const modalVisible = ref(props.modelValue)

  // 关闭弹窗事件
  const onHideModal = () => {
    modalVisible.value = false
    emits('update:modelValue', modalVisible.value)
  }

  watch(
    () => props.modelValue,
    (value) => {
      modalVisible.value = value
      if (value) {
        getEmpInfoFn(props.info.id, props.info.empId)
      }
    },
  )

  onMounted(() => {
    if (props.modelValue) {
      getEmpInfoFn(props.info.id, props.info.empId)
    }
  })
</script>

<template>
  <div>
    <!-- 职员信息弹窗 -->
    <HModal width="500px" title="职员信息" v-model="modalVisible" @close="onHideModal">
      <el-descriptions :column="1">
        <el-descriptions-item label="职员姓名：">
          <div>{{ props.info.name }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="登录账号：">
          <div>{{ props.info.phone }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="最后登录：">
          <div>{{ props.info.loginTime }}</div>
        </el-descriptions-item>
      </el-descriptions>
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="职员信息" name="info">
          <el-descriptions :column="1" v-loading="getEmpInfoLoading">
            <template v-if="empInfo">
              <el-descriptions-item label="绑定手机：" v-if="false">
                <span class="text">{{ empInfo.phone }}</span>
              </el-descriptions-item>
              <!-- <el-descriptions-item label="员工岗位：">
                <span class="text">{{ empInfo.position }}</span>
              </el-descriptions-item> -->
              <el-descriptions-item label="职员角色：">
                <span class="text">{{ empInfo.role }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="所在部门：">
                <span class="text">{{ empInfo.organize }}</span>
              </el-descriptions-item>
            </template>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="登录日志" name="login_log"></el-tab-pane>
        <el-tab-pane label="操作日志" name="operate_log"></el-tab-pane>
      </el-tabs>
      <template #footerRight>
        <HButton is-modal @click="onHideModal">关闭</HButton>
      </template>
    </HModal>
  </div>
</template>

<style scoped lang="scss">
  :deep(.el-descriptions__cell) {
    display: flex;

    .el-descriptions__label {
      margin: 0;
    }
  }
</style>
